<template>
  <el-container class="zbody">
    <el-aside :width="asdewidth" :class="{left57:viewwidth<900 && shrinks==1}">
      <el-row class="saide-top" style="color: #1890FF;font-size: 20px">
        众唱
        <span v-if="!isCollapse">后台管理</span>
      </el-row>
      <el-menu
        :default-active="selectItem"
        class="el-menu-vertical-demo"
        unique-opened
        router
        :collapse-transition="false"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
        @select="handleSelect"
      >
        <el-submenu  index="role" v-if="havepermission('6')">
          <template slot="title">
            <i class="iconfont iconjifenguanli"></i>
            <span>管理员管理</span>
          </template>
          <el-menu-item index="Role">管理员管理</el-menu-item>
          <el-menu-item index="Power">权限管理</el-menu-item>

        </el-submenu>
       <!--丹-->
        <!--<el-menu-item index="platform" v-if="havepermission('17')">-->
          <!--<i class="iconfont iconjifenguanli"></i>-->
          <!--<span slot="title">角色管理</span>-->
        <!--</el-menu-item>-->
        <el-menu-item index="giftPackage" v-if="havepermission('1')">
          <i class="iconfont iconjifenguanli"></i>
          <span slot="title">K神大礼包</span>
        </el-menu-item>
        <el-menu-item index="GoodShop"  v-if="havepermission('2')">
          <i class="iconfont iconjifenguanli"></i>
          <span slot="title">好店推荐</span>
        </el-menu-item>
        <el-menu-item index="kTVShop" v-if="havepermission('3')">
          <i class="iconfont iconjifenguanli"></i>
          <span slot="title">平台商铺管理</span>
        </el-menu-item>
        <el-submenu index="1" v-if="havepermission('4')">
          <template slot="title"><i class="iconfont iconcommodity"></i>
            <span> 优惠券管理 </span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="examineCoupon">
              <!--<i class="iconfont icon-kaoqin1"></i>-->
              审核优惠券
            </el-menu-item>
            <el-menu-item index="couponList">
              <!--<i class="iconfont icon-kaoqin1"></i>-->
              优惠券列表
            </el-menu-item>
            <el-menu-item index="writeOffCoupon">
              <!--<i class="iconfont icon-kaoqin1"></i>-->
              优惠券核销管理
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3" v-if="userdata.type == 2 || (userdata.type == 1 && havepermission('5'))" >
          <template  slot="title">
            <i class="iconfont iconhuiyuanguanli"></i>
            <span  @click="getShop()"> KTV管理 </span>
          </template>
          <el-menu-item-group>
            <el-menu-item  @click="getShop()" index="couponManage">
              <!--<i class="iconfont icon-kaoqin1"></i>-->
              优惠券管理
            </el-menu-item>

            <el-menu-item  @click="getShop()" index="baseMessage">
              <!--<i class="iconfont icon-kaoqin1"></i>-->
              基本信息管理
            </el-menu-item>
            <el-menu-item  @click="getShop()" index="privateRoom">
              <!--<i class="iconfont icon-kaoqin1"></i>-->
              包房管理
            </el-menu-item>
            <el-menu-item  @click="getShop()" index="commentManage">
              <!--<i class="iconfont icon-kaoqin1"></i>-->
              评论管理
            </el-menu-item>
          </el-menu-item-group>
          <el-submenu index="3-1">
            <template slot="title">核销管理</template>
            <el-menu-item   @click="getShop()" index="orderWC">
              订单核销
            </el-menu-item>
            <el-menu-item   @click="getShop()" index="wCOrderList">
              核销订单列表
            </el-menu-item>
            <el-menu-item   @click="getShop()" index="couponCodeWC">
              券码核销
            </el-menu-item>
          </el-submenu>
          <el-submenu  index="3-2">
            <template slot="title">商城管理</template>
            <el-menu-item  @click="getShop()" index="goodsManage">
              商品管理
            </el-menu-item>
            <el-menu-item  @click="getShop()" index="setMealManage">
              套餐管理
            </el-menu-item>
          </el-submenu>
          <el-submenu  index="3-3">
            <template slot="title">订单管理</template>
            <el-menu-item  @click="getShop()" index="reserveOrder">
              <!--<i class="iconfont icon-kaoqin1"></i>-->
              预订订单
            </el-menu-item>
            <el-menu-item  @click="getShop()" index="cancelReserveOrder">
              <!--<i class="iconfont icon-kaoqin1"></i>-->
              取消预定订单
            </el-menu-item>
          </el-submenu>
        </el-submenu>

        <!--宋-->


        <el-submenu  index="winning" v-if="havepermission('7')">
          <template slot="title">
            <i class="iconfont iconjifenguanli"></i>
            <span>大转盘中奖管理</span>
          </template>
          <el-menu-item index="Winning">大转盘中奖管理</el-menu-item>
          <el-menu-item index="Verifi">大转盘中奖核销</el-menu-item>

        </el-submenu>
        <el-menu-item index="Cooperative" v-if="havepermission('8')">
          <i class="iconfont iconjifenguanli"></i>
          <span slot="title">合作商推广</span>
        </el-menu-item>
        <el-menu-item index="Rotation" v-if="havepermission('9')">
          <i class="iconfont iconpingtai"></i>
          <span slot="title">轮播图管理</span>
        </el-menu-item>
       <!--江-->

        <el-menu-item index="storeList"  v-if="havepermission('10')">
          <i class="iconfont iconpingtai"></i>
          <span slot="title">用户点赞商家管理</span>
        </el-menu-item>
        <el-submenu index="clientList" v-if="havepermission('11')">
          <template slot="title"><i class="iconfont icondingdanguanli"></i>
            <span> 消费者管理 </span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="clientList" >消费者管理</el-menu-item>
            <el-menu-item index="statisticsCharge" >充值记录</el-menu-item>

          </el-menu-item-group>
        </el-submenu >
        <el-submenu index="agent"  v-if="havepermission('12')">
          <template slot="title"><i class="iconfont icondingdanguanli"></i>
            <span> 城市代理商管理 </span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="agentList1" route="agentList" :style="{color: selectItem==='agentList1'? '#409EFF':'#303133'}"  @click.native="agentType(1,false)">个人代理商管理</el-menu-item>
            <el-menu-item index="agentList2" route="agentList" :style="{color: selectItem==='agentList2'? '#409EFF':'#303133'}" @click.native="agentType(2,false)">组织代理商管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu >
        <el-submenu v-if="havepermission('13')" index="spread" >
          <template slot="title"><i class="iconfont icondingdanguanli"></i>
            <span> 推广代理商管理 </span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="agentList3" route="agentList" :style="{color: selectItem==='agentList3'? '#409EFF':'#303133'}"  @click.native="agentType(3,false)">个人推广代理商管理</el-menu-item>
            <el-menu-item index="agentList4" route="agentList" :style="{color: selectItem==='agentList4'? '#409EFF':'#303133'}"  @click.native="agentType(4,false)">组织推广代理商管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item v-if="havepermission('14')" index="managerList"  @click.native="setAuth(false)">
          <i class="iconfont iconpingtai"></i>
          <span slot="title">团队经理管理</span>
        </el-menu-item>
        <el-menu-item v-if="userdata.type == 3" index="groundList"  @click.native="setAuth(false)">
          <i class="iconfont iconpingtai"></i>
          <span slot="title">地推人员管理</span>
        </el-menu-item>
        <el-submenu v-if="havepermission('16')" index="account" >
          <template slot="title"><i class="iconfont icondingdanguanli"></i>
            <span> 平台统计 </span>
          </template>
          <el-menu-item-group>
            <el-submenu index="accountA">
              <span slot="title">城市代理商统计</span>
              <el-menu-item index="account1" route="agentList" :style="{color: selectItem==='account1'? '#409EFF':'#303133'}" @click.native="agentType(1,true)">个人代理商统计</el-menu-item>
              <el-menu-item index="account2" route="agentList" :style="{color: selectItem==='account2'? '#409EFF':'#303133'}"  @click.native="agentType(2,true)">组织代理商统计</el-menu-item>
            </el-submenu>
            <el-submenu index="accountB">
              <span slot="title">推广代理商统计</span>
              <el-menu-item index="account3" route="agentList" :style="{color: selectItem==='account3'? '#409EFF':'#303133'}" @click.native="agentType(3,true)">个人代理商统计</el-menu-item>
              <el-menu-item index="account4" route="agentList" :style="{color: selectItem==='account4'? '#409EFF':'#303133'}" @click.native="agentType(4,true)">组织代理商统计</el-menu-item>
            </el-submenu>
            <el-menu-item index="account5" route="managerList" :style="{color: selectItem==='account5'? '#409EFF':'#303133'}"  @click.native="setAuth(true)">团队经理统计</el-menu-item>
            <el-menu-item index="account6" route="groundList"  :style="{color: selectItem==='account6'? '#409EFF':'#303133'}" @click.native="setAuth(true)">地推人员统计</el-menu-item>
            <el-menu-item index="statisticsShop" >ktv商家统计</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container class="index-right">
      <div class="msk" v-if="viewwidth<900 && shrinks==2" @click="shrink"></div>
      <el-header :height="headheight">
        <el-row>
          <el-col :span="12" style="text-align: left;">
            <i class="iconfont iconaside-shrink" style="font-size: 20px;cursor: pointer"
               v-if="!isCollapse" @click="shrink"></i>
            <i class="iconfont  iconaside-unfold" style="font-size: 20px;cursor: pointer"
               v-if="isCollapse" @click="unfold"></i>
          </el-col>
          <el-col :span="12">
            <el-dropdown style="color: #333">
                            <span class="el-dropdown-link">
                                {{ userdata.user_name }}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="editPwd()">修改密码</el-dropdown-item>
                <el-dropdown-item style="color: #333" divided @click.native="adminlogout()">退出
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <keep-alive>
        <router-view></router-view>
        </keep-alive>
      </el-main>
    </el-container>
    <el-dialog :visible.sync="xiugaimimaVisible" title="修改密码" width="300px" :modal-append-to-body="false">
      <el-form :model="editform">
        <el-form-item label="原密码" :label-width="formLabelWidth">
          <el-input v-model="editform.old_pwd" auto-complete="off" placeholder="请输入旧密码" required></el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth">
          <el-input v-model="editform.new_pwd" auto-complete="off" placeholder="请输入新密码" required></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth">
          <el-input v-model="editform.affirm_pwd" auto-complete="off" placeholder="请确认密码" required></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="xiugaimimaVisible = false">取 消</el-button>
        <el-button type="primary" @click="reAdminSubmit()"
                   :disabled="editform.old_pwd=='' || editform.new_pwd=='' ||
                   editform.affirm_pwd=='' || editform.new_pwd !== editform.affirm_pwd">确 定
        </el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
  export default {
    name: "Index",
    mounted() {
      this.getstart()   // 本地测试关掉
      this.meddd()
    },
    data() {
      return {
        role:'',
        dataa: [],
        fullscreenLoading: false,
        isCollapse: false,
        viewwidth: document.body.clientWidth,
        asdewidth: '190px',
        headheight: '56px',
        shrinks: 2,
        xiugaimimaVisible: false,
        editform: {
          id: '',
          type: '',
          old_pwd: '',
          new_pwd: '',
          affirm_pwd: ''
        },
        formLabelWidth: '80px',
        newMsgCount:'',
      }
    },
    computed: {
      userdata() {
        return this.$store.state.login.user
      },
      permissiondata() {
        return this.$store.state.login.user.role.split(",");
      },
      selectItem() {
        return this.$store.state.login.selectItem
      },
    },
    watch: {},
    methods: {
      setAuth(bool){
        this.$store.state.login.account= bool
      },
      agentType(type,bool){
        this.$store.state.login.typeApply= type
        this.$store.state.login.account= bool
      },
      editPwd(name) {
        this.xiugaimimaVisible = true
      },
      adminlogout() {
        this.$store.commit('logout');
        this.$router.push({name: 'login'})
      },
      getstart() {
        let thi = this
        if (!thi.$store.state.login.in) {
          thi.$router.push({name: "login", params: {userId: 123}})
        }else if (thi.$store.state.login.user.type == 2) {
          var ws = new WebSocket('ws://47.108.26.58:2345');
          ws.onopen = function(){
            var uid = 'shop_id_' + thi.$store.state.login.user.id;
            ws.send(uid);
            ws.send('ssdd')
          };
          ws.onmessage = function(e){
            // alert(e.data);
            console.log(e.data)
            // var a = JSON.stringify(e.data)
            var a = JSON.parse(e.data)
            console.log(a)
            if (a.order_id){
              thi.$store.state.login.NoticeAudio += 1
              console.log(thi.$store.state.login.NoticeAudio)
              if (a.type == 1) {
                thi.$store.state.login.newsNotice = a
                setTimeout(()=>{
                  thi.$store.state.login.Noticenews += 1
                },200)
              }
              if (a.type == 2) {
                thi.$store.state.login.newsNotice = a
                setTimeout(()=>{
                  thi.$store.state.login.NoticenewsFalse += 1
                },200)
              }

            }

          };
        }
      },
      getShop(){
        let thi = this
        if (thi.userdata.type == 1){
          if (thi.$store.state.login.shopData.length !== 0){
            console.log('123')
            console.log(thi.$store.state.login.shopData)
          } else {
            const prams = {
              page:1,
              pageSize:999999,
              key:'',
            }
            thi.mySelectAll('shopList',prams).then(function (value) {
              thi.$store.state.login.shopData = value.data
            })
          }
        }
      },
      handleSelect(index,path){
        console.log(index,path)
        // this.selectItem=index
        this.$store.state.login.selectItem=index
      },
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
      meddd() {
        if (this.viewwidth < 900) {
          this.isCollapse = true
          this.asdewidth = '57px'
          this.headheight = '50px'
          this.shrinks = 1
        }
      },
      shrink() {
        this.isCollapse = true
        this.asdewidth = '57px'
        this.shrinks = 1
      },
      unfold() {
        this.isCollapse = false
        this.asdewidth = '180px'
        this.shrinks = 2
      },
      havepermission(index) {
        if (this.userdata.role) {
          var ind = this.permissiondata.indexOf(index)
          if (ind >= 0) {
            return true
          } else {
            return false
          }
        }
        return false
      },
      reAdminSubmit(){
        let thi = this
        thi.$store.state.login.Loading = true
        thi.editform.id=thi.userdata.id
        thi.editform.type=thi.userdata.type
        thi.$http.post(global.posturl.host+global.posturl.editPwd,
          thi.editform
        ).then(function (response) {
          var qcode = response.data.code
          var qmsg = response.data.msg
          var qdata = response.data.data
          thi.$store.state.login.Loading = false
          if(qcode==200){
            thi.$store.commit('logout')
            thi.$router.push({ name: "login", params: { userId: 123 }})
            thi.$message({
              message: '修改成功,请重新登录!',
              type: 'success',
              duration: 5000
            });
            thi.xiugaimimaVisible = false
          }else{
            thi.$message({
              message: qmsg,
              type: 'error',
              duration: 5000
            });
          }

        }).catch(function (error) {
          console.log(error)
          thi.$store.state.login.Loading = false
        });
      }
    }
  }
</script>

<style scoped>
  @media (max-width: 900px) {
    .el-aside {
      background-color: #fff;
      color: #D2D2D4;
      text-align: center;
      border-right: solid 1px #e5e5e5;
      width: 55px;
      overflow-x: hidden;
    }

    .el-header {
      line-height: 56px;
    }

    .el-main {
      padding: 0px;
    }
  }

  @media (min-width: 900px) {
    .el-aside {
      background-color: #fff;
      color: #D2D2D4;
      text-align: center;
      border-right: solid 1px #e5e5e5;
      overflow-x: hidden;
    }

    .el-header {
      line-height: 56px;
    }
  }

  .el-aside {
    transition: all 0.4s;
  }

  .el-header {
    text-align: right;
    font-size: 14px;
    background-color: #fff;
    color: #333;
    border-bottom: solid 1px #EDEDED;
  }

  .zbody {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .el-menu-vertical-demo {
    /*width: 220px;*/
    text-align: left;
    overflow: hidden;
    z-index: 19;
    border: none;
  }

  .index-right {
    overflow: auto;
  }

  .el-main {
    background-color: #F2F2F2;
    color: #333;
    text-align: center;
    overflow: auto;
    padding: 0px;
  }

  .saide-top {
    height: 56px;
    text-align: center;
    line-height: 56px;
    background-color: #fff;
    color: black;
  }

  .left57 {
    margin-left: -57px;
  }

  .msk {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 999;
    opacity: 0.1;
  }
</style>
